<template>
    <div>
        <van-nav-bar title="支付" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="paybox">
            <p>支付金额</p>
            <strong>￥{{ payinfo.order_price }}</strong>
        </div>
        <van-radio-group v-model="radio">
            <van-cell-group>
            <van-cell>
                <template #title>
                    <span class="custom-title">微信支付</span>
                </template>
                <template #icon>
                    <img src="@/assets/weixinzhifu.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="weixin" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">支付宝支付</span>
                </template>
                <template #icon>
                    <img src="@/assets/zhifubao.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="zhifubao" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">微众银行</span>
                </template>
                <template #icon>
                    <img src="@/assets/yinhanglogo-.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="zhongwei" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">中国农业银行</span>
                </template>
                <template #icon>
                    <img src="@/assets/yinhanglogo-_3.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="nongye" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">中国建设银行</span>
                </template>
                <template #icon>
                    <img src="@/assets/yinhanglogo-_1.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="jianshe" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">交通银行</span>
                </template>
                <template #icon>
                    <img src="@/assets/yinhanglogo-_2.png" alt="" style="width: 30px;height: 30px;">
                </template>
                <template #right-icon> 
                    <van-radio name="jiaotong" checked-color="#FA436A"></van-radio>                
                </template>
            </van-cell>
            </van-cell-group>
        </van-radio-group>
        <van-button type="primary" size="normal" color="#FA436A"
         block style="width: 90%;margin:30px auto;border-radius: 5px;" @click="handlePay">确认支付</van-button>
    </div>
</template>
<script>
import {orderPay,orderInfo} from "@/api/order"
export default {
   data() {
      return {
        payinfo:{},
        weixin:true,
        zhifubao:false,
        zhongwei:false,
        nongye:false,
        jianshe:false,
        jiaotong:false,
        radio:"weixin"
      }
   },
   created(){
    orderPay(this.$route.query).then(res=>{
        orderInfo({order_sn:res.data.data}).then(result=>{
            this.payinfo = result.data.data;
        })
    })
   },
   computed:{
   },
   methods:{
    onClickLeft(){
        this.$router.go(-2);
    },
    handlePay(){
        this.$toast.success("支付成功")
    }
   },
}
</script>
<style scoped>
    .paybox{
        width: 100%;
        height: 132px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .paybox p{
        font-size: 14px;
        color: #909399;
        margin-top: 50px;
    }
    .paybox strong{
        font-size: 30px;
    }
    .custom-title {
        margin-left: 15px;
        vertical-align: middle;
    }
</style>
